<!DOCTYPE html>
<html data-use-rem="640">
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <meta name="description" content="MeadJohnson">
  <meta name="keywords" content="MeadJohnson">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="MeadJohnson">
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Pragma" content="no-cache">
  <title>美赞臣-专家学堂</title>
  <link rel="stylesheet" href="css/public.css"/>
</head>
<body>
<div class="authbox">
</div>
<div class="container">
  <header class="headbox">
    <div class="goback fl hide"></div>
    <div class="searchbox">
      <div class="searchbtn fl">
        <img src="img/search.png" alt=""/>
      </div>
      <div class="fl searchipt">
        <input type="text" placeholder="可搜索课程&专家&标签名" class="searchinput"/>
      </div>
    </div>
    <button class="searchbtn2 hide"></button>
  </header>
  <!--隐藏搜索框下内容hide-->
  <div class="indexbox">
    <div class="idx_head"></div>
    <div class="hostbox">
      <h3>热门课程推荐</h3>
      <ul>
        <li>
          <span class="on">不限</span>
        </li>
        <li>
          <span>音乐天赋</span>
        </li>
        <li>
          <span>宝宝成长</span>
        </li>
        <li>
          <span>孕期心理</span>
        </li>
        <li>
          <span>孕期</span>
        </li>
        <li>
          <span>尿布</span>
        </li>
      </ul>
    </div>
    <div class="idx_nav">
      <ul>
        <li class="fl">
          <span>按热度</span>
        </li>
        <li class="fl">
          <span>按时间</span>
        </li>
        <li class="fl on">
          <span>只看回顾</span>
        </li>
      </ul>
    </div>
    <div class="main_box">
      <div class="class_box">
        <img src="img/icon_21.png">
        <div class="enrollment">
          <div class="title">报名人数</div>
          <div class="num">2222</div>
        </div>
        <div class="class_info">
          <!--音频class为audiotitle-->
          <div class="videotitle">准妈妈临产前最担心的事</div>
          <div class="expert">张容呀 北京协和医院</div>
          <div class="time">2016年4月22日18:10</div>
          <div class="btn">
            <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/go.png">
            <span> 收听回顾</span>
          </div>
        </div>
      </div>
      <!--<div class="more">-->
      <!--<span>更多课程</span>-->
      <!--<img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/more.png">-->
      <!--</div>-->
    </div>
    <div class="main_box hide">
      <div class="class_box">
        <!--<img src="{{item.poster}}">-->
        <div class="enrollment">
          <div class="title">报名人数</div>
          <div class="num">{{item.apply_count}}</div>
        </div>
        <div class="class_info">
          <div class="title">{{item.name}}</div>
          <div class="expert">{{item.expert.name}} {{item.expert.title}}</view>
            <div class="time">{{item.start_at}}</div>
            <div class="btn">
              <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/go.png">
              <span> 正在开课</span>
            </div>
            <div class="btn">
              <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/go.png">
              <span> 马上预约</span>
            </div>
            <div class="btn">
              <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/go.png">
              <span> 已预约</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hostsearch hide">
    <span>湿疹</span>
    <span>抵抗力</span>
    <span>母乳</span>
    <span>母乳</span>
    <span>抵抗力</span>
    <span>母乳</span>
    <span>母乳</span>
  </div>
</div>
<div class="footer">
  <div  class="fl nav on">
    <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/fm.png">
    <span>专家学堂</span>
  </div>
  <div class="fl nav">
    <img src="img/expert.png">
    <span>专家回答</span>
  </div>
  <div class="fl nav">
    <img src="https://r.epclass.meadjohnson.joypaw.com/p/v2/me.png">
    <span>个人中心</span>
  </div>
</div>
<script src="js/rem.js"></script>
<script src="js/zepto.min.js"></script>
<script>
  $(".searchinput").focus(function(){
    $('.indexbox').hide();
    $('.hostsearch').show();
    $('.searchbox').addClass('searchbox2');
    $('.goback').show();
    $('.searchbtn').hide();
    $('.searchbtn2').show();
  })
  $(".goback").click(function(){
    $('.indexbox').show();
    $('.hostsearch').hide();
    $('.searchbox').removeClass('searchbox2');
    $('.goback').hide();
    $('.searchbtn').show();
    $('.searchbtn2').hide();
  })
</script>
</body>
</html>